<svelte:self>

Posted on 2023-04-28 by

henrikvilhelmberglund

Here we want to display a visualization of arrays.

This looks fine!
12345 
<script>
	export let data = [1, 2, 3, 4, 5];
</script>

<span class="m-1 inline-block border border-solid border-blue-500">
	{#each data as item}
		<span class="m-1 inline-block border border-solid border-red-500">{item}</span>
	{/each}
</span>

<style>
</style>

It works fine with a flat array, but what if it is nested? We can use <svelte:self> for recursively displaying the component.

Here we used the svelte:self element to recursively show the component again if the item was an array. We can also pass props to it. Here we pass in the data array.
1 2 3 4 5 
<script>
	export let data = [1, [2, [3], 4], 5];
</script>

<span class="m-1 inline-block border border-solid border-blue-500">
	{#each data as item}
		<span class="m-1 inline-block border border-solid border-red-500">
			{#if Array.isArray(item)}
				<svelte:self data={item} />
			{:else}
				{item}
			{/if}
		</span>
	{/each}
</span>

<style>
</style>

To prevent infinite loops <svelte:self> can only be used within if blocks , each blocks or in slots .